<template>
    <div class="body">
        <header>
            <div></div>
            <div><span>用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称</span></div>
        </header>
        <section>
            <div>
                <div id="coupon">
                    <div><span>0</span>张</div>
                    <div>卖座券</div>
                </div>
                <div id="money">
                    <div>¥<span>0</span></div>
                    <div>余额
                    </div>
                </div>
            </div>
            <template v-for="item in systemList"  :key="item.id">
                <Option :title="item.title" :url="item.url"></Option>
            </template>
            <!-- {{ systemList }} -->

        </section>
    </div>
</template>

<script>
export default {
    async beforeRouteEnter(to, from, next) {
        let isAuthenticated = await localStorage.getItem('token')
        if (!isAuthenticated) next({ name: "Login", })
        else next()
    },
}
</script>

<script setup>
import { ref } from 'vue'
import { onBeforeRouteLeave } from "vue-router"
import Option from './centers/Option.vue'

// onBeforeRouteLeave(() => {
//     const answer = window.confirm('是否离开?')
//     if (!answer) return false
// })
const systemList = ref([
    {
        id: 1,
        title: '电影订单',
        url: ''
    },
    {
        id: 2,
        title: '组合红包',
        url: ''
    },
    {
        id: 3,
        title: '历史记录',
        url:''
    },
    {
        id: 4,
        title: '帮助与客服',
        url:'https://assets.maizuo.com/h5/v5/public/app/img/help.a9203368.png'
    },
    {
        id: 5,
        title: '设置',
        url:''
    },
])

</script>


<style scoped lang="scss">
#app>div,
.body {
    height: 100%;
    background-color: #F4F4F4;
}

header {
    background-color: #FF8226;
    background-image: url('https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png');
    height: 40vw;
    display: flex;
    align-items: center;
    justify-content: space-around;

    &>:nth-child(1) {
        background-color: #999;
        width: 20vw;
        height: 20vw;
        border-radius: 50%;
        margin-left: 4vw;
        margin-right: 2vw;
    }

    &>:nth-child(2) {
        flex: 1;
        background-color: #999;
        margin-right: 8vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

section {
    &>:nth-child(1) {
        background-color: #fff;
        display: flex;
        margin-bottom: 2vw;
        padding: 3vw 0px;
        justify-content: space-around;
        &>div{
            text-align: center;
            &>:nth-child(2){
                 color: #797D82;
                 font-size: 12px;
             }
        }
    }
}</style>